import React from "react";
import { Typography, Empty, Spin } from "antd";
import { useTitle } from "ahooks";

import styles from "./common.module.scss";
import QuestionCard from "../components/QuestionCard";
import { QuestionType } from "../../types";

import ListSearch from "../components/ListSearch";
import useLoadQuestionListData from "../../hooks/useLoadQuestionListData";
import ListPage from "../components/ListPage";

const { Title } = Typography;

const Star: React.FC = () => {
  const { loading, data = {} } = useLoadQuestionListData({ isStar: true });
  const { list = [], total = 0 } = data;

  useTitle("新问卷 - 星标问卷");

  return (
    <>
      <div className={styles.header}>
        <div className={styles.left}>
          <Title level={3}>星标问卷</Title>
        </div>
        <div className={styles.right}>
          <ListSearch />
        </div>
      </div>
      <div className={styles.main}>
        {loading ? (
          <div style={{ textAlign: "center" }}>
            <Spin />
          </div>
        ) : (
          <div>
            {list.length ? (
              list.map((i: QuestionType) => <QuestionCard key={i.id} {...i} />)
            ) : (
              <Empty description="暂无数据" />
            )}
          </div>
        )}
        <div className={styles.footer}>
          {!loading && <ListPage total={total} />}
        </div>
      </div>
    </>
  );
};
export default Star;
